<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind指令</title>
    <script src="./js/vue.js"></script>
    <style>
        #dd{
            border: 1px solid red;
            height: 200px;
            width: 200px;
            border-radius: 50%;
        }
        .bgcolor.red{
            background-color: red;

        }
        .bgcolor.blue{
            background-color: blue;
        }
        .bgcolor.green{
            background-color: green;
        }
        .bgcolor.yellow{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <img :src="imgSrc" width="200">
        <button @click="changeImg">切换图片</button>
        <div id="dd" :class="color" @click="changeColor"></div>
    </div>
</body>
</html>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: 'v-bind指令',
            imgSrc: './imgs/OIP-C.jpg',
            color: 'bgcolor red'
        },
        methods: {
            changeColor(){
                // alert('切换颜色')
                if(this.color == 'bgcolor red'){
                    this.color = 'bgcolor blue'
                }else if(this.color == 'bgcolor blue'){
                    this.color = 'bgcolor green'
                }else if(this.color == 'bgcolor green'){
                    this.color = 'bgcolor yellow'
                }else{
                    this.color = 'bgcolor red'
                }
            },
            changeImg(){
                alert('切换图片')
                this.imgSrc = './imgs/OIP-A.jpg'
            }
        }
    })

</script>